<template>
<div>
<div class="bai">
<el-form ref="form" :model="form" label-width="80px"  size="mini">
     <el-form-item label="查询名称" class="shu">
        <el-input v-model="form.name" ></el-input>
        <el-button type="primary" size="mini" @click.native="dianj">查询</el-button>
        <el-button size="mini" @click="ko">重置</el-button>
    </el-form-item>
</el-form>


  <el-table  :data="data"  stripe style="width: 100%;" size='medium'>
    <el-table-column prop="dname" border label="姓名" width="100"></el-table-column>
    <el-table-column prop="sex" label="性别" width="100"> </el-table-column>
    <el-table-column prop="phone" label="手机号" width="150"> </el-table-column>
    <el-table-column prop="department" label="科室" width="150"> </el-table-column>
    <el-table-column prop="register_time" label="就诊时间" width="150"> </el-table-column>
    <el-table-column prop="state" label="取消原因"> </el-table-column>
  </el-table>
  </div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.getData()
  },
  methods:{
        //重置input输入框
    ko(){
      this.form.name = ''
      this.names=this.form.name
    },
    dianj(){
      this.names=this.form.name
      
    },
    getData(){
      let url = `/back_get?qxgh=${this.form.name}`
      this.axios.get(url).then(res=>{
        console.log(res);
        this.data = res.data.data
      })
    },


  },
  data() {
    return {
        data:[],
         form: {
            name: '',
         },
    
     
    };
  },
};
</script>

<style lang="scss" scoped>

.el-button{
    display: inline;
}
::v-deep .el-table{
  padding: 0 20px 20px 20px;
}
::v-deep .el-input__inner{
    width: 200px;
}
::v-deep .el-form{
  padding-top: 20px;
  padding-left: 10px;
}

::v-deep .el-input{
  width: 215px;
}
</style>




<style lang="scss">
.el-main {
  padding: 20px;
  
}
.el-table th.el-table__cell{
    background-color: #f5f5f5;
}.el-button{
    display: inline;
}
.bai{
  background-color: #fff;
  height: calc(100vh - 100px);
    box-shadow:0px 0px 10px #ccc;
     border-radius: 7px;
       overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  
}
</style>